<template>
    <view class="login-container">
        <view class="form-container">
            <view class="title-container">
                <view class="title">绑定手机号</view>
                <text class="label">请使用手机号，快捷登录</text>
            </view>
            <view class="form-item">
                <!-- <text class="label">手机号码</text> -->
                <view class="input-wrapper">
                    <input v-model="phone" type="number" placeholder="请输入手机号码" maxlength="11"
                        @input="handlePhoneInput" />
                    <text class="send-code" :class="{ disabled: !canSend }" @click="sendVerifyCode">
                        {{ countdown > 0 ? `${countdown}s后重试` : '获取验证码' }}
                    </text>
                </view>
            </view>

            <view class="form-item">
                <!-- <text class="label">验证码</text> -->
                <view class="input-wrapper">
                    <input v-model="verifyCode" type="number" placeholder="请输入6位验证码" maxlength="6" />
                </view>
            </view>

            <button class="login-btn" :disabled="!canLogin" @click="handleLogin">
                立即绑定
            </button>
        </view>

        <view class="agreement" v-if="false">
            <image class="check-icon" :src="`/static/personalCenter/${checkName}.png`" mode="aspectFill"
                @click="handleCheck"></image>
            <text>我已阅读并同意</text>
            <text class="agreement-text" @click="confirmAgreement">《用户协议》</text>
            <text>和</text>
            <text class="agreement-text" @click="confirmPrivacy">《隐私政策》</text>
        </view>

        <!-- <view class="logo">
            <image src="/static/logo.png" mode="aspectFit"></image>
        </view> -->
        <agreementPopup :showAgreement="isShowAgreement" @update:visible="updateVisible" code="user_agreement" />
        <agreementPopup :showAgreement="isShowPrivacy" @update:visible="updateVisible" code="privacy_agreement" />
    </view>
</template>

<script>
import http from '@/utils/http'
import agreementPopup from '../common/carpooleAgreementPopup.vue'
import { initWebSocket } from '@/utils/ws'
export default {
    components: { agreementPopup },
    data() {
        return {
            checkName: 'auth-quan', // auth-gou
            phone: '',          // 手机号
            verifyCode: '',     // 验证码
            countdown: 0,       // 倒计时
            timer: null,       // 定时器
            agreed: false,      // 是否同意协议
            canSend: false,    // 是否可以发送验证码
            isShowAgreement: false,
            isShowPrivacy: false,
        }
    },
    onLoad() {},
    computed: {
        // 是否可以登录
        canLogin() {
            return this.phone.length === 11 && this.verifyCode.length === 6
        }
    },
    methods: {
        // 协议相关
        updateVisible() {
            this.isShowAgreement = false
            this.isShowPrivacy = false
        },
        confirmAgreement() {
            this.isShowAgreement = true
        },
        confirmPrivacy() {
            this.isShowPrivacy = true
        },
        handleCheck() {
            this.agreed = !this.agreed
            this.checkName = this.agreed ? 'auth-gou' : 'auth-quan'
        },
        // 处理手机号输入
        handlePhoneInput(e) {
            this.phone = e.detail.value
            this.canSend = this.phone.length === 11
        },

        // 发送验证码
        sendVerifyCode() {
            if (!this.canSend || this.countdown > 0) return

            // 验证手机号格式
            if (!/^1[3-9]\d{9}$/.test(this.phone)) {
                uni.showToast({
                    title: '请输入正确的手机号码',
                    icon: 'none'
                })
                return
            }
            this.$http.post('/h5/common/sendSmsCode', {
                phone: this.phone,
                scene: "change_phone"
            }).then(res => {
                uni.showToast({
                    title: '验证码已发送',
                    icon: 'success'
                })
                // 开始倒计时
                this.countdown = 60
                this.timer = setInterval(() => {
                    if (this.countdown <= 0) {
                        clearInterval(this.timer)
                        return
                    }
                    this.countdown--
                }, 1000)
            })
        },

        // 处理登录
        async handleLogin() {
            if (!this.canLogin) return

            // 验证验证码格式
            if (!/^\d{6}$/.test(this.verifyCode)) {
                uni.showToast({
                    title: '请输入6位数字验证码',
                    icon: 'none'
                })
                return
            }
            uni.showLoading({
                title: '绑定中...'
            })
            try {
                const res = await this.$http.post('/h5/user/changePhone', {
                    phone: this.phone,
                    code: this.verifyCode || '999999'// this.verifyCode,
                })
                this.fetchUserInfo()
                uni.hideLoading()
                uni.showToast({
                    title: '操作成功',
                    icon: 'success'
                })



            } catch (error) {}
        },
        async fetchUserInfo() {
            try {
                const res = await this.$http.get('/h5/user/me')
                uni.setStorageSync('userInfo', res.data.user)
                this.getAuthInfoData()
                // 跳转到首页
                uni.reLaunch({
                    url: '/pages/home/index'
                })
            } catch (error) {}
        },
        // 获取认证信息
        async getAuthInfoData() {
            try {
                const data = await this.$http.get("/h5/user/carowner/authInfo");
                let resData = data.data
                if (resData) {
                    uni.setStorageSync('is_auth', true)
                } else {
                    uni.setStorageSync('is_auth', false)
                }

            } catch (error) {}
        },
    },

    beforeDestroy() {
        // 清除定时器
        if (this.timer) {
            clearInterval(this.timer)
        }
    }
}
</script>

<style lang="scss" scoped>
.login-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-image: url("~@/static/login-bg.png");
    background-size: 100% 100%;
    // background-position: 50% 50%;
    background-repeat: no-repeat;
    overflow: hidden;
}

.logo {
    display: flex;
    justify-content: center;

    image {
        width: 522rpx;
        height: 522rpx;
    }

}

.form-container {
    margin: 140rpx 70rpx 40rpx 70rpx;

    .title-container {
        margin-bottom: 70rpx;

        .title {
            font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
            font-weight: 700;
            font-size: 36rpx;
            color: #0B1F20;
        }

        .label {
            font-size: 28rpx;
            color: #999999;
        }
    }
}

.form-item {
    margin-bottom: 40rpx;

    .label {
        display: block;
        margin-bottom: 20rpx;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 32rpx;
        color: #0B1F20;
    }
}



.input-wrapper {
    display: flex;
    align-items: center;
    border-bottom: 2rpx solid #eee;
    padding-bottom: 10rpx;
}

.input-wrapper input {
    flex: 1;
    height: 80rpx;
    font-size: 32rpx;
}

.send-code {
    color: #FF7937;
    font-size: 28rpx;
    margin-left: 20rpx;
    white-space: nowrap;
}

.send-code.disabled {
    color: #999;
}

.login-btn {
    margin-top: 60rpx;
    background-color: #FF7937;
    color: #fff;
    height: 90rpx;
    line-height: 90rpx;
    border-radius: 45rpx;
    font-size: 32rpx;
}

.login-btn[disabled] {
    background-color: #ccc;
}

.agreement {
    font-size: 24rpx;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20rpx;

    .check-icon {
        width: 40rpx;
        height: 40rpx;
        margin-right: 14rpx;
    }

    .agreement-text {
        color: #FF7937;
    }
}
</style>